import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xiaomishop/app/service/MyScreenExtention.dart';

import '../../../routes/app_pages.dart';
import '../controllers/category_controller.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Scaffold(
        appBar: _appBar(),
        body: Row(
          children: [
            Container(
                width: 220.ww,
                child: Obx(() => ListView.builder(
                    itemCount: controller.mCatergoryItems.length,
                    itemBuilder: (context, position) {
                      return InkWell(
                          onTap: () {
                            controller.setCurrentPosition(position);
                          },
                          child: Obx(() => Container(
                              alignment: Alignment.center,
                              height: 120.hh,
                              child: Stack(children: [
                                Align(
                                    alignment: Alignment.center,
                                    child: Text(controller
                                        .mCatergoryItems[position].title)),
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Container(
                                        height: 60.hh,
                                        width: 12.ww,
                                        color: position ==
                                                controller.currentPosition.value
                                            ? Colors.red
                                            : Colors.white))
                              ]))));
                    }))),
            Expanded(
              child: Obx(() => Container(
                  child: GridView.builder(
                      itemCount: controller.mCatergoryGoodMaps["result"] == null
                          ? 0
                          : controller.mCatergoryGoodMaps["result"].length,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          mainAxisSpacing: 10.hh,
                          crossAxisSpacing: 10.ww,
                          mainAxisExtent: 280.hh,
                          // childAspectRatio: ,宽高比
                          crossAxisCount: 3),
                      itemBuilder: (context, position) {
                        var url = controller.mCatergoryGoodMaps["result"]
                            [position]["pic"];
                        url.replaceAll("\\", "/");
                        return Obx(() => InkWell(
                            onTap: () {
                              Get.toNamed(Routes.GOODLIST, arguments: {
                                "id": controller.mCatergoryGoodMaps["result"]
                                    [position]["_id"]
                              });
                            },
                            child: Container(
                                alignment: Alignment.bottomCenter,
                                child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Container(
                                          margin: EdgeInsets.fromLTRB(
                                              0, 0, 0, 10.hh),
                                          height: 210.hh,
                                          child: Image.network(
                                              "https://xiaomi.itying.com/${url}",
                                              fit: BoxFit.cover)),
                                      Text(
                                          "${controller.mCatergoryGoodMaps["result"][position]["title"]}",
                                          style: TextStyle(fontSize: 32.ss))
                                    ]))));
                      }))),
              flex: 1,
            )
          ],
        ),
      )
    ]);
  }

  _searchView() {
    return Container(
        color: Colors.red,
        margin: EdgeInsets.fromLTRB(0, 70.hh, 0, 0),
        height: 100.hh,
        child: Stack(children: [
          Positioned(
              left: 170.ww,
              right: 220.ww,
              top: 0,
              bottom: 0,
              child: Align(
                //搜索输入框
                child: Container(
                  height: 80.hh,
                  decoration: BoxDecoration(
                      color: const Color(0xFFC1C1C3),
                      borderRadius: BorderRadius.circular(26)),
                  child: Stack(
                    children: [
                      Positioned(
                        left: 100.ww,
                        top: 0,
                        bottom: 0,
                        child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            "空调",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontSize: 40.ss,
                                color: const Color(0xFF8A8A8A)),
                          ),
                        ),
                      ),
                      Positioned(
                          bottom: 0,
                          top: 0,
                          left: 30.ww,
                          child: Align(
                              alignment: Alignment.centerLeft,
                              child: Image.asset(
                                  'assets/images/image_search.png',
                                  width: 55.ww,
                                  height: 55.hh))),
                    ],
                  ),
                ),
              )),
          Positioned(
              right: 40.ww,
              bottom: 0,
              top: 0,
              child: Image.asset('assets/images/image_msg.png',
                  width: 60.ww, height: 60.hh)),
        ]));
  }

  _appBar() {
    return AppBar(
      //可以给appbar的title 给一个container
      title: InkWell(
          child: Container(
              width: 800.ww,
              height: 96.hh,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.black12,
                  borderRadius: BorderRadius.circular(26)),
              child: Text("手机",
                  style: TextStyle(color: Colors.black54, fontSize: 40.ss))),
          onTap: () {
            Get.toNamed(Routes.GOOD_SEARCH);
          }),
      backgroundColor: Colors.white,
      elevation: 0,
      actions: [
        IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.message_outlined,
              color: Colors.black12,
            ))
      ],
    );
  }
}
